/*
列表
<!--原始列表-->
<!--下拉刷新-->
<!--上滑加载更多-->
<!--列表-->
User: shy
Date: 2024-04-02 16:00
All rights reserved by Kong Fanqun
*/
<template>
  <div class="list_main">
    <div @click="gundong">{{ test22 }}嘿嘿</div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="pull_disabled">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          loading-text="加载中..."
          @load="onLoad"
          ref="child"
          @scroll="scroll_cli">
        <van-cell v-for="item in list" :key="item" :title="item"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import {reactive, ref, onMounted} from "vue";

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pull_disabled = ref(false)
const child = ref(null)

const obj = reactive({
  name: "",
  age: ""
})
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 30; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
import {useAttrs, useSlots} from 'vue'

const slots = useSlots();
const attrs = useAttrs();
defineProps({
  test22: String,
  lost22: String
})

const emits = defineEmits(['getChild']);
const scroll = (event) => {
  console.log("触发")
  const scrollTop = event.target.scrollTop
  if (scrollTop <= 0) {
    pull_disabled.value = false
  } else {
    pull_disabled.value = true
  }
}
onMounted(async () => {
  // window.addEventListener('scroll', (red)=>{
  //   console.log( red)
  // },true)

})

function scroll_cli(event) {
  const scrollTop = event.target.scrollTop
  if (scrollTop <= 0) {
    pull_disabled.value = false
  } else {
    pull_disabled.value = true
  }
}

//向父类传值
function gundong() {
  emits("getChild", "子组件传值");
}

defineExpose({
  test_1: String,
  test_2: String
})

</script>

<style scoped>
.list_main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

:deep(.van-pull-refresh) {
  width: 100%;
  height: 100%;
  justify-content: center;
}

:deep(.van-list) {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

:deep(.van-pull-refresh__track) {
  width: 100%;
  height: auto;
}

:deep(.van-cell) {
  width: 100%;
  height: auto;
}
</style>